<template>
  <div class="pagination">
    <span class="black-bg" @click="prev">上一页</span>
    <span class="black-bg" @click="next">下一页</span>
    <div>
      <input type="text" class="weui-input page" v-model="pageIndex">
      <span class="black-bg goto" @click="goto">跳转分页</span>
    </div>
    <span class="total">(共{{total}}页)</span>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    data(){
      return {
        pageIndex:1,
      }
    },
    props:{
      total:{
        type:Number
      },
      pageNum:{
        type:Number
      }
    },
    mounted(){

    },
    methods:{
      prev(){
        if(this.pageIndex<=1){
          return;
        }
        this.$emit("listenToChildEvent",--this.pageIndex);
      },
      next(){
        if(this.pageIndex>=this.total){return;}
        this.$emit("listenToChildEvent",++this.pageIndex);
      },
      goto(){
        if(this.pageIndex<1){
          this.pageIndex = 1;
        }else if(this.pageIndex>this.total){
          this.pageIndex = this.total;
        }
        this.$emit("listenToChildEvent",this.pageIndex);
      }
    }
  }
</script>

<style scoped>
  .pagination{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
  }
  .black-bg{
    color: #ffffff;
    background-color: #282828;
    font-size: 0.6rem;
    width: 2.5rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 2px;
  }
  .pagination div{
    display: flex;
  }
  .goto{
    width: 3.2rem;
    border-radius: 0;
  }
  .page{
    width: 2.5rem;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    border: 1px solid #999999;
    box-sizing: border-box;
    border-right: 0;
    color: #656565;
    font-size: 0.6rem;
  }
  .total{
    font-size: 0.6rem;
  }
</style>
